<template>
  <div class="company-list-page">
    <!-- 顶部导航栏 -->
    <van-nav-bar :title="title" left-text="返回" left-arrow>
      <template #left>
        <van-icon
          name="arrow-left"
          size="18"
          color="#333"
          @click="$router.go(-1)"
        />
      </template>
      <template #right></template>
    </van-nav-bar>
    <van-tabs
      v-model="active"
      color="#1890FF"
      title-active-color="#1890FF"
      swipe-threshold="4"
      animated
    >
      <van-tab title="企业荣誉">
        <!-- <honerGovernment></honerGovernment> -->
        <honerIndustry
          :honorList="honorList"
          :controlId="controlId"
          @changeHonorType="handleHonorTypeChange"
        ></honerIndustry>
      </van-tab>
      <van-tab title="实施情况">
        <implementationStatus :controlId="controlId"></implementationStatus>
      </van-tab>
      <van-tab title="职称人员情况">
        <titlePersonnel :controlId="controlId"></titlePersonnel>
      </van-tab>
      <van-tab title="企业特色"></van-tab>
      <van-tab title="企业负面信息">
        <negativeInfo :controlId="controlId"></negativeInfo>
      </van-tab>
    </van-tabs>
  </div>
</template>
<script>
// import honerGovernment from "./components/honerGovernment";
import honerIndustry from "./components/honerIndustry";
import implementationStatus from "./components/implementationStatus";
import titlePersonnel from "./components/titlePersonnel";
import negativeInfo from "./components/negativeInfo";
import { termite } from "@/api";
export default {
  components: {
    honerIndustry,
    implementationStatus,
    titlePersonnel,
    negativeInfo,
  },
  name: "qualifiCation",
  data() {
    return {
      active: 0,
      title: "",
      controlId: "",
      honorType: "1", // 1:行业奖项, 2:政府表彰
      honorList: [], // 荣誉列表数据
      lineWidth: 0,
    };
  },
  created() {
    console.log("查询参数:", this.$route.query);
    this.title = this.$route.query.title;
    this.controlId = this.$route.query.controlId;
    console.log("controlId:", this.controlId);
    this.init();
  },
  mounted() {
    this.$nextTick(() => {
      this.updateLineWidth();
    });
    window.addEventListener("resize", this.updateLineWidth);
  },
  beforeDestroy() {
    window.removeEventListener("resize", this.updateLineWidth);
  },
  methods: {
    init() {
      const params = {
        controlId: this.controlId,
        honorType: this.honorType,
      };
      this.getHoner(params);
    },
    getHoner(params) {
      console.log(params, "params");
      termite.getCompanyHoner(params).then((res) => {
        console.log(res, "接口返回数据");
        if (res.errorCode === "000000") {
          this.honorList = res.data || [];
          console.log("荣誉列表数据:", this.honorList);
        }
      });
    },
    handleHonorTypeChange(honorType) {
      console.log("切换荣誉类型:", honorType);
      this.honorType = honorType;
      const params = {
        controlId: this.controlId,
        honorType: this.honorType,
      };
      this.getHoner(params);
    },
    onTabChange() {
      this.$nextTick(() => {
        this.updateLineWidth();
        setTimeout(() => this.updateLineWidth(), 60);
      });
    },
    updateLineWidth() {
      try {
        const tryMeasure = (retryCount = 0) => {
          const wrap =
            this.$el && this.$el.querySelector
              ? this.$el.querySelector(".van-tabs__wrap")
              : null;
          const activeTab = wrap
            ? wrap.querySelector(".van-tab--active")
            : null;
          const textEl = wrap
            ? wrap.querySelector(".van-tab--active .van-tab__text")
            : null;
          // 以文字本身宽度为准，若不存在再退回整项标签
          const target = textEl || activeTab;
          if (target) {
            let raw = 0;
            if (textEl && textEl.firstChild && document.createRange) {
              const range = document.createRange();
              range.selectNodeContents(textEl);
              const r = range.getBoundingClientRect();
              raw = r && r.width ? r.width : 0;
            }
            if (!raw) {
              const rect = target.getBoundingClientRect();
              raw = rect && rect.width ? rect.width : target.scrollWidth || 0;
            }
            const dpr = window.devicePixelRatio || 1;
            const measured = Math.round(raw * dpr) / dpr;
            if (measured > 0) {
              this.lineWidth = measured;
              return;
            }
          }
          if (retryCount < 2) {
            requestAnimationFrame(() => tryMeasure(retryCount + 1));
          }
        };
        requestAnimationFrame(() => tryMeasure(0));
      } catch (e) {
        // 忽略测量异常
      }
    },
  },
};
</script>

<style lang="less" scoped>
.company-list-page {
  background-color: #f5f5f5;
  height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.page-header {
  display: flex;
  align-items: center;
  height: 44px;
  background-color: #fff;
  border-bottom: 1px solid #f0f0f0;
  position: sticky;
  top: 0;
  z-index: 100;
  padding: 0 16px;

  .header-left {
    width: 44px;
    height: 44px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: -16px;
    cursor: pointer;
  }

  .header-title {
    flex: 1;
    text-align: center;
    font-family:
      PingFangSC,
      PingFang SC;
    font-weight: 500;
    font-size: 17px;
    color: #333;
  }
}

::v-deep .van-nav-bar {
  flex-shrink: 0;
}

::v-deep .van-tabs {
  display: flex;
  flex-direction: column;
  flex: 1;
  overflow: hidden;

  .van-tabs__wrap {
    flex-shrink: 0;
  }

  .van-tabs__content {
    flex: 1;
    overflow-y: auto;
  }
}
</style>
